<template>
    <div class="iframeWrapper">
        <iframe ref="iframe" id="myiframe" :src="url" @load="jsonLoaded" class="iframe" frameborder="0"></iframe>
    </div>
</template>
<script>
    import apiHost from '@/api/apiHost';
    import token from '@/libs/util.token';
    import cookie from '@/libs/util.cookies';
    export default {
        components: {},
        props: {
            //模式，0代表图纸，1代表编辑器
            model: {
                type: Number,
                default: 0
            },
            //图纸的id
            drawingId: {
                type: String,
                default: ""
            },
            //项目id
            projectID: {
                type: String,
                default: "default"
            }
        },
        data() {
            return {
                //iframed URL地址
                url: "",
                //图扑软件服务器地址
                topoServer: apiHost("topV"),
                //用户名
                userName: (token.initToken() || {}).sub || "admin",
                //环境参数
                env: `${process.env.VUE_APP_ENV}` || 'development',
                //appId
                appId: {
                    development: "$c4a9761909454173a01005f9191d3dc2",
                    test: "$8719019b8ca24643b22019e130ea1725",
                    production: "$3b1ce4c23e4e4686ac11623aae26f0ba"
                },
                //秘钥
                appSecret: {
                    development: "2a0b1fd69b014abe982ace302e9e0718",
                    test: "1c9c277822ab42059e7ae3d19f572976",
                    production: "583890e8f456437dbb77edabdbef8184"
                }
            };
        },
        methods: {
            //获取图纸的url
            getDrawingUrl() {
                const crypto = require('crypto');
                var token = "8k83cbxuuwspgst926544m4d6i9uhum6";
                var screenID = "4aaae187‐73c6‐49e9‐9def‐bf2af7d1b013";
                var time = Date.now();
                var operator = this.userName; // 操作员用户名
                var stringToSign = operator + '|' + screenID + '|' + time;
                var signature = crypto.createHmac('sha256', token).update(stringToSign).digest().toString('base64');
                var url = "http://topv.iotopo.com/share?url=displays/" + screenID + ".json&_topv_operator=" + operator +
                    "&_topv_time=" + time + "&_topv_signature=" + encodeURIComponent(signature);
                // this.url = `${this.topoServer}/share?url=displays/${this.drawingId}.json`
                this.url = `${this.topoServer}/share?url=${this.drawingId}`
            },
            jsonLoaded() {},
            //获取编辑器的url
            getEditorUrl() {
                const crypto = require('crypto');
                var appID = this.appId[this.env];
                var appSecret = this.appSecret[this.env];
                var username = this.userName;
                var time = Date.now();
                var stringToSign = appID + '|' + this.projectID + '|' + username + '|' + time;
                var signature = crypto.createHmac('sha256', appSecret).update(stringToSign).digest().toString('base64');
                let url =
                    `${this.topoServer}/topvEditor?_topv_app_id=${appID}&_topv_project_id=${this.projectID}&_topv_username=${username}&_topv_time=${time}&_topv_signature=${encodeURIComponent(signature)}`
                this.url = url;
            },
            //初始化topo的url
            initTopoUrl() {
                if (this.model) {
                    this.getEditorUrl();
                } else {
                    this.getDrawingUrl();
                }
            },
            //在元素上绑定事件
            bindEvent(element, eventName, eventHandler) {
                if (element.addEventListener) {
                    element.addEventListener(eventName, eventHandler, false);
                } else if (element.attachEvent) {
                    element.attachEvent('on' + eventName, eventHandler);
                }
            },
            removeEvent(element, eventName, eventHandler) {
                if (element.removeEventListener) {
                    element.removeEventListener(eventName, eventHandler);
                } else if (element.detachEvent) {
                    element.detachEvent('on' + eventName, eventHandler);
                }
            },
            //事件处理器
            eventHandler(e) {
                let data = e.data || {};
                if (data.type !== "topoMessage") {
                    return;
                }
                //topv传过来的数据
                data = data.data || {};
                switch (data.type) {
                    case "tokenTimeout": //token超时,
                        
                        break;
                    case "getToken": //iframe里面需获取外部token
                        let iframeWindow = this.$refs.iframe && this.$refs.iframe.contentWindow;
                        if (iframeWindow) {
                            iframeWindow.postMessage({
                                type: "getTokenMessage",
                                data: {
                                    token: cookie.get('access_token') || "",
                                    env: this.env
                                }
                            }, "*");
                        }
                        break;
                    default: //默认会把数据传出去
                        this.$emit("getTopoData", data);
                        break;
                }
            }
        },
        created() {
            this.initTopoUrl();
        },
        mounted() {
            this.bindEvent(window, 'message', this.eventHandler);
        },
        destroyed() {
            this.removeEvent(window, 'message', this.eventHandler);
        }
    };
</script>
<style lang="scss" scoped>
    .iframeWrapper {
        position: relative;
        overflow: hidden;
        height: 100%;

        .iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
    }
</style>